<!--
 @description 客户-自投反馈
 @fileName index.vue
 @author zengqiongying
 @created 2022/11/10 20:15:51
-->
<template>
  <div class="page-has-bottom bg_gray">
    <ComHeader title="自投反馈" bg-color="#FAFBFE" />
    <div class="cus-fixed-bottom">
      <van-button type="primary" block round class="cus-btn-submit" :disabled="!enbleSubmit" @click="handlerConfirm">确定</van-button>
    </div>
    <div class="reason-list">
      <div class="title">请选择反馈原因：</div>
      <div v-for="(item,i) in reasonList" :key="i" class="l-row" :class="{'selected':item.dictCode===invalidDetail}" @click="handleClick(item.dictCode)">
        <span>{{ item.dictName }}</span>
        <img v-if="item.dictCode===invalidDetail" class="icon-sel" src="@/assets/icon-yes.png">
      </div>
    </div>
  </div>
</template>

<script>
import { bus } from '@/utils/bus'
import { getDictList } from '@/apis/dataDict'
import { getDisDetail, disAdvertisementFeedback } from '@/apis/customer'
export default {
  name: 'CustomerFeedback',
  data() {
    return {
      clueCustomerId: this.$route.query.id,
      reasonList: [],
      detailData: '',
      invalidDetail: ''
    }
  },

  computed: {
    enbleSubmit() {
      return !!this.invalidDetail
    }
  },

  created() {
    this.onLoad()
  },
  activated() {},

  mounted() {},

  methods: {
    async onLoad() {
      getDisDetail(this.clueCustomerId).then(res => {
        this.detailData = res.data
      })
      this.reasonList = await getDictList('STORE_ADVERTISING_FEEDBACK')
    },
    handleClick(v) {
      this.invalidDetail = v
    },
    handlerConfirm() {
      if (!this.invalidDetail) {
        this.$toast('请选择反馈原因')
        return
      }
      // TODO:字段 status 不确定
      const data = {
        clueCustomerId: this.detailData.id,	// string 线索客户id
        invalidDetail: this.invalidDetail, //	string 无效原因代码
        phone: this.detailData.phone, //	string 联系电话
        status: this.detailData.status === 1 ? 1 : 2 //	string状态：1:有效，2：无效
      }
      return disAdvertisementFeedback(data).then(res => {
        this.$toast('操作成功!')
        bus.$emit('refreshCustomerItem', {
          title: '自投反馈',
          type: 'feedback',
          id: this.clueCustomerId
        })
        this.$router.go(-1)
      })
    }
  }
}

</script>
<style lang='less' scoped>
.tip{
  padding: 16px 16px;
  line-height: 20px;
  font-size: 12px;
  color: #999;
}
.reason-list{
  background: #fff;
  padding:0 16px 16px;
  .title{
    color: #3C4458;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    font-weight: bold;
  }
  .l-row{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    line-height: 20px;
    box-sizing: border-box;
    color: #3C4458;
    font-size: 14px;
    &::after{
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: #D8DCE3;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    &:last-child::after{
      height: 0;
    }
    &.selected{
      color: #16BC83;
      font-weight: bold;
    }
    .icon-sel{
      width: 30px;
      height: 21px;
    }
  }
}
</style>
